
<template>
	<div class="type">
		<div class="type_left">
			<ul v-for="(item,index) in typename" :key="index" >
				<li :class="{active:active==index}" @click="onClickLeft(index)">{{item.title}}</li>
			</ul>
		</div>
		<div class="type_right">
			<ul>
				<li v-for="(i,ind) in mainArray" :key="ind">
					<img :src="i.wares_masterimg"/>
					<p>{{i.wares_title}}</p>
				</li>
			</ul>
		</div>
	</div>
		
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				typename: [
					{ title: "小米" },
					{ title: "锤子" },
					{ title: "苹果" },
					{ title: "三星" },
					{ title: "魅族" },
					{ title: "诺基亚" },
					{ title: "华为" },
				],
				mainArray:[],
				title: '小米'
			}
		},
		created(){
			this.getListData(0)
		},
		methods: {
			/* 获取列表数据 */
			
			async getListData(index){
				console.log(this.title)
				/* 因无真实数据，当前方法模拟数据 */
				var data = await this.$http.typeService.getListData({
					typename: this.title
				});
				this.mainArray = data.result
			
				console.log("this.mainArray: ", this.mainArray)
			},
			onClickLeft(i) {
				this.title = this.typename[i].title
				this.getListData(i)
				this.active = i
				
			},
			
		}
	}
</script>

<style lang="stylus" scoped>
@import "../common/styl/page/type.styl"
</style>
